<template>
	<view>
		<!-- 轮播图 -->
		<swiper class="swiper" circular :indicator-active-color="activeColor" :indicator-dots="indicatorDots"
			:autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item,index) in productsList.xhtpList" :key="index">
				<image class="swiperimg" :src="item" mode="widthFix"></image>
			</swiper-item>
		</swiper>

		<view class="introduceFlower">
			<view class="headp">
				<text class="small">￥</text>
				<text class="price">{{productsList.xhyjjg}}</text>
				<text class="small">起</text>
				<text class="textr">店铺卷满78减3 ></text>
			</view>
			<view class="title">
				<text class="txt">斗南</text>
				{{productsList.xhmc}}
			</view>
			<view class="xiaoliang">
				<text>月销{{productsList.xhxl}}+</text>
				<view class="wrap">
					<uni-icons type="redo" size="26" color="#999999"></uni-icons>
					<button class="uni-icns" open-type="share" @click="shareFriends">
					</button>
				</view>
			</view>
		</view>

		<view class="details">
			<view class="partone">
				<image class="carr" src="../../static/img/car.png" mode=""></image>
				<text class="adress">昆明斗南</text>快递：免运费
			</view>
			<view class="line"></view>
			<view class="partone">
				<image class="carr" src="../../static/img/happy.png" mode=""></image>
				<text class="other">破损必赔 · 极速退款 · 签收后概不退换</text>
			</view>
		</view>

		<view class="content" @click="GoConten">
			<view class="title">
				<text>买家秀</text>
				<text class="right">></text>
			</view>
			<view class="line"></view>
			<view class="" v-if="comments.length==0">该商品暂无评论哦~</view>
			<view class="" v-if="comments.length!=0">
				<view class="part" @click="Godetails(0)" v-if="comments.length==1">
					<image src="../../static/img/num1.jpeg" mode=""></image>
					<text class="name">{{comments[0].nickname}}</text>
					<view class="body">
						{{comments[0].commentms==null? '暂无文字描述~' : comments[0].commentms}}
						<text
							style="color: #0566ba;font-size: 26rpx;">@{{comments[0].xhmc}}-{{comments[0].xhzl}}-{{comments[0].xhzt}}</text>
					</view>
				</view>
				<view class="part" @click="Godetails(1)" v-if="comments.length==2">
					<image src="../../static/img/num1.jpeg" mode=""></image>
					<text class="name">{{comments[1].nickname}}</text>
					<view class="body">
						{{comments[1].commentms==null? '暂无文字描述~' : comments[1].commentms}}
						<text
							style="color: #0566ba;font-size: 26rpx;">@{{comments[1].xhmc}}-{{comments[1].xhzl}}-{{comments[0].xhzt}}</text>
					</view>
				</view>
			</view>
		</view>
		<image :src="productsList.xhxq" style="width: 95%;margin: 0 auto;display: block;" mode="widthFix"></image>


		<view style="height: 120rpx;"></view>
		<view class="bottomPart">
			<view class="store">
				<uni-icons type="shop-filled" size="28" color="#e85d51"></uni-icons>
				<view class="stotit">店铺</view>
			</view>
			<view class="store" @click="IsCheapee">
				<image class="chper" src="../../static/img/cheaper.png" mode=""></image>
				<view class="stotit">最优</view>
			</view>
			<view class="store" @click="IsShoow">
				<uni-icons v-show="show" type="star" size="28" color="#676767"></uni-icons>
				<uni-icons v-show="!show" type="star-filled" size="28" color="#e85d51"></uni-icons>
				<view class="stotit">收藏</view>
			</view>
			<view class="add" @click="IsAde">加入购物车</view>
			<view class="pay" @click="open">立即购买</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="pop">
				<view class="topOne">
					<image :src="productsList.xhtpList[0]" class="img"></image>
					<view class="prices">
						<text class="yuan">￥</text>
						<text>{{productsList.xhyjjg}}</text>
					</view>
					<view class="priceALl">
						<text class="yuan">实付价￥</text>
						<text>{{productsList.xhyjjg}}</text>
					</view>
				</view>
				<view class="address">
					<view v-if="SetAdd==false" class="liss">
						<image src="../../static/img/address.png" class="imgs"></image>
						<view class="body">
							<view class="name" v-if="addresss.addressName==undefined">请先添加地址</view>
							<view class="name" v-else>{{addresss.addressName}} {{addresss.addressLocation}}</view>
							<view class="chnuo">包邮 送运费险 付款后1小时发货</view>
						</view>
						<uni-icons v-if="addresss.addressName==undefined" @click="GoAddre" type="right" size="18"
							color="#d9d9d9"></uni-icons>
						<uni-icons v-else @click="setNewAdd" type="right" size="18" color="#d9d9d9"></uni-icons>
					</view>
					<view v-if="SetAdd==true" v-for="(item,indexx) in AllAddress" :key="indexx" class="liss">
						<!-- <image src="../../static/img/address.png" class="imgs"></image> -->
						<view class="bodys">
							<view class="name" @click="setAddre(item)">
								<text
									class="round">{{item.addressName.charAt(0)}}</text>{{item.addressName}}-{{item.addressPhone}}-{{item.addressLocation}}
							</view>
							<!-- <view class="chnuo"> {{item.addressLocation}}</view> -->
						</view>
					</view>
				</view>
				<view class="serprsing">
					<text class="widths">贺卡</text>
					<text :class="showCard ? 'hsActive' : 'has'" @click="IsCard(1)">纸质贺卡</text>
					<text :class="!showCard ? 'hsActive' : 'has'" @click="IsCard(0)">无需贺卡</text>
					<textarea v-show="showCard" class="inp" name="" id="" cols="30" rows="10" @blur="getValue"
						placeholder="写上您的祝福语,可附上署名(200字内),请勿填写特殊符号和表情包"></textarea>
				</view>
				<view class="bottom">
					<view class="button" @click="GoPay">立即支付{{productsList.xhyjjg}}</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 1000,
				activeColor: "white",
				show: true, //没有收藏
				showCard: true, //有卡片
				bh: '',
				productsList: '',
				addresss: '',
				AllAddress: [],
				SetAdd: false,
				addressBh: '',
				cardMs: '',
				token: '',
				comments: []
			}
		},
		onLoad(option) {
			var th = this
			th.bh = option.bh
		},
		onShow() {
			var bs = uni.getStorageSync('UserInformation')
			this.token = bs.usertoken

			this.getData()
			this.getAddress()
			if (this.token != undefined) {
				this.getComment()
				return
			}
		},
		methods: {
			Godetails(index) {

				var item = this.comments[index]

				uni.navigateTo({
					url: '/pages-share/CommentDetals/CommentDetals?item=' + JSON.stringify(item)
				})
			},
			getComment() {
				var th = this
				th.requestfs({
					url: '/mall/comment/selectCommentList?bh=' + th.bh,
					Authorization: th.token,
				}).then(res => {
					if (res.data.code == 200) {
						th.comments = res.data.data
					} else {
						uni.showToast({
							title: "数据请求失败",
							icon: "none",
							duration: 2000
						})
					}
				})
			},
			GoAddre() {
				uni.navigateTo({
					url: '/pages-me/addAdress/addAdress'
				})
			},
			setAddre(item) {
				this.SetAdd = false
				this.addresss = item
				this.addressBh = item.bh
			},
			setNewAdd() {
				this.SetAdd = true
			},
			getAddress() {
				this.requestfs({
					url: '/mall/customer/address/selectAddress',
					Authorization: this.token,
				}).then(res => {
					if (res.data.msg == "success") {
						if (res.data.data.length != 0) {
							this.addresss = res.data.data[0]
							this.AllAddress = res.data.data
							this.addressBh = res.data.data[0].bh
						}
					}
				})
			},
			getData() {
				this.requestfs({
					url: '/mall/goods/goodsDetails?bh=' + this.bh
				}).then(res => {
					if (res.data.msg == "success") {
						this.productsList = res.data.data
					}
				})

			},
			getValue(e) {
				// console.log(this.showCard)
				// if (this.showCard) {
				this.cardMs = e.detail.value
				// } else {
				// 	this.cardMs = "无需贺卡"
				// }
			},
			GoPay() {

				var th = this
				if (th.addresss.addressName == undefined) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'error'
					})
					return
				}
				if (th.cardMs == '') {
					this.cardMs = "无需贺卡"
				}
				uni.showModal({
					title: '模拟支付环节',
					content: '是否确认支付',
					success(e) {

						// 销量++
						th.requestfs({
							url: '/mall/goods/addXhxl?bh=' + th.bh,
							method:'PUT',
							Authorization: th.token,
						}).then(res => {})

						var status = ''
						if (e.confirm) {
							th.requestfs({
								url: '/mall/order/addOrUpdateOrder',
								data: {
									goodsBh: th.productsList.bh,
									addressBh: th.addressBh,
									cardMs: th.cardMs,
									goodsCount: 1,
									status: 1
								},
								method: "POST",
								Authorization: th.token,
							}).then(res => {
								uni.showToast({
									title: '支付成功',
									icon: 'success'
								})

								uni.navigateTo({
									url: '/pages-me/MyOrder/MyOrder'
								})
							})
						} else {
							th.requestfs({
								url: '/mall/order/addOrUpdateOrder',
								data: {
									goodsBh: th.productsList.bh,
									addressBh: th.addressBh,
									cardMs: th.cardMs,
									goodsCount: 1,
									status: 0
								},
								method: "POST",
								Authorization: th.token,
							}).then(res => {

								uni.showToast({
									title: '支付失败',
									icon: 'success'
								})

								uni.navigateTo({
									url: '/pages-me/MyOrder/MyOrder'
								})
							})
						}
					},
					fail(err) {
						console.log('失败', err)
					}
				})
			},
			IsCard(num) {
				if (num == 0) {
					this.showCard = false
				} else {
					this.showCard = true
				}
			},
			open() {
				if (this.token == undefined) {

					uni.showToast({
						title: '请先登录小程序',
						icon: 'none'
					})

					return
				}

				this.$refs.popup.open('bottom')
			},
			shareFriends() {
				uni.share({
					provider: 'weixin', //分享服务提供商（即weixin|qq|sinaweibo）
					scene: "WXSceneSession", //WXSceneSession(分享到聊天界面)、WXSenceTimeline(分享到朋友圈)、WXSceneFavorite(分享到微信收藏)
					type: 5,
					title: '分享标题',
					summary: "分享描述",
					href: 'www.baidu.com', //分享跳转地址
					imageUrl: '../static/lovehot.png', //分享图片路径(必须是线上可访问图片)
					miniProgram: {
						id: 'gh_c6a0acadf951 ',
						path: 'pages/index/index',
						type: 0,
						webUrl: 'http://uniapp.dcloud.io'
					},
					success: function(res) {
						// console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						// console.log("fail:" + JSON.stringify(err));
					}
				})
			},
			GoConten() {
				uni.navigateTo({
					url: '/pages-index/IndexContent/IndexContent?bh=' + this.bh
				})
			},
			IsCheapee() {
				uni.showModal({
					title: '最优购买',
					content: '凌晨至早上十点购买此祝福卡片；晚11点至凌晨购买赠送蛋糕或者鲜花数只'
				})
			},
			IsAde() {
				if (this.token == undefined) {

					uni.showToast({
						title: '请先登录小程序',
						icon: 'none'
					})

					return
				}

				this.requestfs({
					url: '/mall/shopcart/addOrUpdateShopcart',
					method: 'POST',
					Authorization: this.token,
					data: {
						shopcartBh: this.productsList.bh,
						shopcartCount: 1
					}
				}).then(res => {
					if (res.data.msg == "success") {
						uni.showToast({
							title: '加购成功',
							icon: 'success'
						})
					}
				})
			},
			IsShoow() {
				if (this.token == undefined) {

					uni.showToast({
						title: '请先登录小程序',
						icon: 'none'
					})

					return
				}

				this.show = !this.show
				if (this.show) {
					uni.showToast({
						title: '取消收藏',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '收藏成功',
						icon: 'success'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.pop {
		width: 100%;
		background-color: #f2f2f2;
		border-radius: 20rpx;

		.bottom {
			background-color: white;
			margin-top: 20rpx;
			padding: 20rpx 0;

			.button {
				text-align: center;
				width: 96%;
				margin: 0 auto;
				background-image: linear-gradient(to right, rgba(238, 121, 51, 0.7), rgba(233, 52, 57, 1));
				height: 80rpx;
				line-height: 80rpx;
				color: #ffffff;
				border-radius: 50rpx;
			}


		}

		.serprsing {
			background-color: white;
			border-radius: 20rpx;
			padding: 20rpx;
			margin: 20rpx 12rpx 0 12rpx;

			.inp {
				background-color: #fff0ec;
				width: 95%;
				margin-top: 10rpx;
				padding: 15rpx;
				border-radius: 20rpx;
			}

			.widths {
				width: 55%;
				display: inline-block;
				line-height: 80rpx;
			}

			.has {
				text-align: center;
				width: 21%;
				display: inline-block;
				font-size: 26rpx;
				background-color: #e9ecf0;
				border-radius: 50rpx;
				margin-left: 1%;
				padding: 10rpx 0;
			}

			.hsActive {
				margin-left: 1%;
				text-align: center;
				width: 21%;
				display: inline-block;
				font-size: 26rpx;
				color: white;
				background-color: #ff734c;
				border-radius: 50rpx;
				padding: 10rpx 0;
			}
		}

		.address {
			background-color: white;
			border-radius: 20rpx;
			padding: 20rpx;
			margin: 0 12rpx 0 12rpx;

			.liss {
				display: flex;

				.bodys {
					width: 78%;
					// margin-left: 18rpx;
					line-height: 55rpx;

					.name {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;

						.round {
							display: inline-block;
							width: 40rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
							border-radius: 50%;
							background: #fae1d7;
							color: #ea5a2c;
							margin: 0 20rpx 20rpx 0;
							font-size: 28rpx;
						}
					}
				}

				.body {
					width: 78%;
					margin-left: 18rpx;
					line-height: 55rpx;

					.name {
						font-weight: bold;

						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}
				}

				uni-icons {
					margin-top: 35rpx;
				}

				.imgs {
					width: 50rpx;
					height: 50rpx;
					margin-top: 26rpx;
				}
			}
		}

		.topOne {
			padding-top: 20rpx;
			margin: 20rpx 12rpx 20rpx 12rpx;
			display: flex;
			line-height: 60rpx;

			.priceALl {
				color: white;
				background-color: #df6232;
				font-weight: bold;
				border-radius: 50rpx;
				padding: 0 12rpx;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 26rpx;
				margin-top: 6rpx;

				.yuan {
					font-size: 20rpx;
					font-weight: normal;
				}
			}

			.prices {
				color: #df6232;
				font-weight: bold;
				margin: 0 12rpx 0 20rpx;

				.yuan {
					font-size: 22rpx;

				}
			}

			.img {
				width: 66rpx;
				height: 66rpx;
				border-radius: 4rpx;
			}
		}
	}

	.details {
		width: 94%;
		margin: 20rpx auto 0 auto;
		background-color: #f9f9f9;
		border-radius: 4rpx;
		padding: 10rpx 0;

		.line {
			width: 100%;
			height: 1px;
			background-color: #f2f2f2;
		}


		.partone {
			margin: 20rpx;
			padding: 10rpx 0;

			.carr {
				width: 50rpx;
				height: 50rpx;
				vertical-align: middle;
			}

			.other {
				padding: 0 0 0 20rpx;

			}

			.adress {
				font-weight: bold;
				padding: 0 50rpx 0 20rpx;
			}
		}
	}

	.content {
		width: 94%;
		margin: 20rpx auto;
		background-color: #f9f9f9;
		border-radius: 4rpx;
		padding-bottom: 15rpx;

		.part {
			margin: 20rpx;

			.body {
				margin-top: 6rpx;
				font-size: 26rpx;
				color: #212121;
				overflow: hidden; //超出部分隐藏
				text-overflow: ellipsis; //文字隐藏部分显示省略号
				display: -webkit-box; //改变盒子模型
				-webkit-line-clamp: 3; //文字显示几行
				-webkit-box-orient: vertical;
			}

			.name {
				font-weight: bold;
				margin-left: 15rpx;
			}

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				vertical-align: middle;
			}
		}

		.line {
			width: 100%;
			height: 1px;
			background-color: #f2f2f2;
		}

		.title {
			margin: 0 20rpx;
			line-height: 100rpx;
			font-weight: bold;

			.right {
				float: right;
			}
		}
	}

	.bottomPart {
		background-color: white;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 90rpx;
		padding-top: 10rpx;
		display: flex;

		.pay {
			width: 30%;
			background-image: linear-gradient(to right, rgba(238, 125, 49, 0.9), rgba(235, 92, 42, 1));
			height: 80rpx;
			line-height: 80rpx;
			color: #ffffff;
			font-size: 26rpx;
			border-radius: 50rpx;
			text-align: center;
		}

		.add {
			width: 30%;
			margin-right: 2%;
			background-image: linear-gradient(to right, rgba(244, 199, 70, 0.9), rgba(240, 155, 58, 1));
			height: 80rpx;
			line-height: 80rpx;
			color: #ffffff;
			font-size: 26rpx;
			border-radius: 50rpx;
			text-align: center;
		}

		.store {
			font-size: 18rpx;
			width: 12%;
			text-align: center;
			color: #949494;

			.chper {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.introduceFlower {
		width: 91%;
		margin: 20rpx auto;

		.xiaoliang {
			color: #999999;
			font-size: 26rpx;
			height: 40rpx;

			.wrap {
				float: right;
				position: relative;

				button::after {
					border: none;
				}

				.uni-icns {
					background-color: rgba(0, 0, 0, 0);
					height: 40rpx;
				}

				uni-icons {
					top: 0;
					right: 0;
					position: absolute;
				}
			}
		}

		.title {
			font-weight: bold;
			margin: 12rpx 0;

			.txt {
				display: inline-block;
				background-color: #e83437;
				color: white;
				width: 100rpx;
				text-align: center;
				border-radius: 50rpx;
				font-weight: normal;
			}
		}

		.headp {
			font-size: 22rpx;
			color: #df6232;

			.price {
				font-size: 36rpx;
				font-weight: bold;
				margin: 0 4rpx 0 2rpx;
			}

			.textr {
				float: right;
				color: #c07655;
			}
		}
	}

	.swiper {
		width: 96%;
		margin: 20rpx 2%;
		border-radius: 20rpx;
		height: 700rpx;

		.swiperimg {
			width: 100%;
			height: 100%;
			// border-radius: 20rpx;
		}
	}
</style>
